<template>
  <uni-row class="navHome">
    <uni-col :span="10">
      <view class="navHome-col-img">
        <img class="nav-col-img" src="../static/jiaoyi/shouye/1.png" alt="">
      </view>
    </uni-col>
    <uni-col :span="6" class="name-select-msg" >
      <view v-show="props.languageSwitch === false">
        <view class="nav-center-select" @tap="switchOption">
          <view class="navHome-daoHang">
            {{Language}}
          </view>
          <view>
            <img class="navHome-title-img-center-img" src="../static/jiaoyi/shouye/3.png" alt="">
          </view>
        </view>
        <view class="name-select-msg-option" v-show="loading === false">
          <view class="name-select-msg-option-title"  @tap="switchLanguage('en')">English</view>
          <view class="name-select-msg-option-title" @tap="switchLanguage('ja')">日本語</view>
          <view class="name-select-msg-option-title" @tap="switchLanguage('ko')">한국어</view>
          <view class="name-select-msg-option-title" @tap="switchLanguage('zh')">中文</view>
        </view>
      </view>

    </uni-col>
    <uni-col :span="7">
      <view class="navHome-title">
        <view class="navHome-title-img"><span style="font-weight: bolder;font-size: 0.8rem">S1</span><span class="logo-account">{{account}}</span></view>
<!--        <view class="navHome-title-img">-->
<!--          <img class="navHome-title-img-img" src="../static/jiaoyi/shouye/6.png" alt="">-->
<!--        </view>-->
      </view>
    </uni-col>
  </uni-row>
</template>

<script setup>
import { ref,defineProps,defineEmits } from 'vue';
import {onShow} from "@dcloudio/uni-app";
let loading = ref(true);
let Language = ref('中文');
let tabBarListChinese = [{Title: '首頁',}, {Title: '鑄造',}, {Title: '交易',}, {Title: '我的',},]
let tabBarListEngList = [{Title: 'Home',}, {Title: 'Cast',}, {Title: 'Shop',}, {Title: 'Me',},]
let tabBarListJapan = [{Title: 'トップページ',}, {Title: '鋳造',}, {Title: '取り引き',}, {Title: 'マイ',},]
let tabBarListKorea = [{Title: '첫 페이지',}, {Title: '캐스트',}, {Title: '거래',}, {Title: '나의',},]

let account = uni.getStorageSync('Account');

let props = defineProps({
  languageSwitch: {
    type: Boolean,
    default: false
  }
})
let emit = defineEmits(['submitLanguage'])
const switchLanguage = (row) => {
  if(row==='zh'){
    Language.value = '中文';
    tabBarListChinese.forEach((item,index) => {uni.setTabBarItem({index: index, text: item.Title,});});
    emit('submitLanguage', '中文')
    uni.setStorageSync('Accept-Language', 'zh-tw')
  }
  if(row==='en'){
    Language.value = 'Eng';
    tabBarListEngList.forEach((item,index) => {uni.setTabBarItem({index: index, text: item.Title,});});
    emit('submitLanguage', 'Eng')
    uni.setStorageSync('Accept-Language', 'zh-en')
  }
  if(row==='ja'){
    Language.value = '日本語';
    tabBarListJapan.forEach((item,index) => {uni.setTabBarItem({index: index, text: item.Title,});});
    emit('submitLanguage', '日本語')
    uni.setStorageSync('Accept-Language', 'zh-ja')
  }
  if(row==='ko'){
    Language.value = '한국어';
    tabBarListKorea.forEach((item,index) => {uni.setTabBarItem({index: index, text: item.Title,});});
    emit('submitLanguage', '한국어')
    uni.setStorageSync('Accept-Language', 'zh-ko')
  }
  switchOption()
}

onShow(()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang){
    Language.value=lang;
  }
})

const switchOption = ()=>{
  loading.value = !loading.value;
}
</script>

<style scoped>
.logo-account{
  font-size: 4vw;
  color: #A9A8AE;
  width: 20vw;
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-height: 60px; /* 设置最大高度 */
  margin-left: 2vw;
}
.name-select-msg{
  position: relative;
  margin-top: 0.2rem;
}
.name-select-msg-option{
  position: absolute;
  width: 75%;
  background-color: #DFDFEB;
  height: auto;
  border-radius: 0.3rem;
  margin-top: 0.2rem;
  text-align: center;
  z-index: 99999999;
}
.name-select-msg-option-title{
  font-size: 0.85rem;
  margin: 0.4rem auto;
}
.navHome-title-img-center-img{
  scale: 0.7;
  margin-left: 5px;
}
.nav-center-select{
  display: flex;
  background-color: #DFDFEB;
  width: 75%;
  justify-content: space-between;
  align-items: center;     /* 垂直居中 */
  height:1.5rem;
  border-radius: 0.3rem;
  padding: 0.12rem 0.25rem;
  box-sizing: border-box;
}
.navHome-daoHang{
  font-size: 0.8rem;
}
.navHome{
  display: flex;
  justify-content: space-between;
  align-items: center;
  //padding-top: env(safe-area-inset-top); /* 适配iPhone X等刘海屏手机 */
  background-color: #ffffff;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.navHome-col-img{
  display: flex;       /* 启用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}
.nav-col-img{
  scale: 0.6;
}
.navHome-title{
  display: flex;
}
.navHome-title-img{
  display: flex;       /* 启用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}
.navHome-title-img-img{
  scale: 0.7;
}
</style>